<template>
	<view class="hui">
		<view class="head">
			<u-navbar :safeAreaInsetTop="true" :placeholder="true" bgColor="transparent">
				<view class="u-nav-slot b_flex_c" slot="left">
					<u-icon color="#000000" name="map" size="20" v-if="user.fc"></u-icon>
					<view v-else></view>
					<view class="city" v-if="user.fc"><text v-if="user.fc.name">{{user.fc.name}}</text> </view>
				</view>
			</u-navbar>
		</view>
		
		<view class="lun_box">
			<u-swiper :list="lun" indicator indicatorMode="line" keyName="image" height="140" :autoplay="true" circular></u-swiper>
		</view>

        <view class="search_box b_flex_c_s">
			<view class="s_box b_flex_cc" @click="timeShow=true">
				<view class="s_right">{{total.time}}</view>
				<u-icon name="arrow-down-fill" color="#000000" size="11"></u-icon>
			</view> 
			<view class="s_box b_flex_cc" @click="ywyShow=true">
				<view class="s_right">{{total.ywy}}</view>
				<u-icon name="arrow-down-fill" color="#000000" size="11"></u-icon>
			</view>
		</view>

       <view class="total">
		   <view class="total_box" v-for="(item,index) in total.list" :key="index">
		   	<view class="title b_flex_c_s">
				<view>{{item.name}}</view>
			    <view v-if="item.is" @click="$project.toPath(item.url)" class="b_flex_c"><view class="duo">更多</view><u-icon size="13" color="#999" name="arrow-right"></u-icon>  </view>
			</view>
			<view class="b_flex_c_w">
				<view class="total_info" v-for="(items,indexs) in item.list" :key="indexs">
					<view class="total_name">{{items.name}}</view>
					<view :class="[items.color==2?'blue':'','title',items.color==3?'red':'']">{{items.num}}</view>
				</view>
			</view>
			
			<view class="b_flex_c_w lists_box" v-if="item.lists">
				<view class="total_info" v-for="(items,indexs) in item.lists" :key="indexs">
					<view class="total_name">{{items.name}}</view>
					<view :class="[items.color==2?'blue':'','title',items.color==3?'red':'']">{{items.num}}</view>
				</view>
			</view>
			
		   </view>
	   </view>
             
     <u-calendar v-if="total" :monthNum="total.monthNum"  @confirm="setTime" :minDate="total.minDate" :maxDate="total.maxDate" :show="timeShow" mode="single" :closeOnClickOverlay="true" @close="timeShow=false"></u-calendar>

       <u-picker @confirm="setYwy" :show="ywyShow" :columns="ywy" keyName="nickname" @close="ywyShow=false" @cancel="ywyShow=false" :closeOnClickOverlay="true"></u-picker>

	</view>
</template>

<script>
	import {
		userInfo,adList,total,ywyList
	} from '@/require/api';

	export default {
		data() {
			return {
				user:'',
				lun:[],
				total:'',
				ywy:[],
				timeShow:false,
				ywyShow:false,
				params:{time:'',ywy:''}
			}
		},
		methods: {
			setTime(e){
				this.params.time=e[0];
				this.getTotal();
				this.timeShow=false;
			},
			setYwy(e){
				console.log(e);
				this.params.ywy=e.value[0].id;
				this.getTotal();
				this.ywyShow=false;
			},
			async getUserInfo() {
				let {
					data,
					code
				} = await userInfo();
				if (code == 1) {
					this.user = data;
				}
			},
			async getAdList(){
				let {
					data,
					code
				} = await adList();
				if (code == 1) {
					this.lun = data;
				}
			},
			async getTotal(){
				let {
					data,
					code
				} = await total(this.params);
				if (code == 1) {
					this.total = data;
				}
			},
			async getYwy(){
				let {
					data,
					code
				} = await ywyList();
				if (code == 1) {
					this.ywy[0] = data;
				}
			}
		},
		onShow() {
			this.getUserInfo();
			this.getAdList();
			this.getTotal();
			this.getYwy();
		},
		onShareAppMessage() {
		
		},
		onShareTimeline() {
		
		},
	}
</script>

<style lang="scss" scoped>
	
	::v-deep{
		.u-navbar--fixed{
			background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
		}
	}
	
	.head {
		background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
	}

	.city {
		margin-left: 10rpx;
		color: black;
	}
	
	.lun_box{
		box-sizing: border-box;
		padding: 15rpx 20rpx 0 20rpx;
		background: linear-gradient(to bottom,#D7EAF3,#F5F5F5);
	}
	
	.search_box{
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 29rpx;
	}
	
	.s_box{
		width: 48%;
		background-color: white;
		box-sizing: border-box;
		padding: 16rpx 0;
		border-radius: 45rpx;
	}
	
	.s_right{
		margin-right: 10rpx;
	}
	.total{
		box-sizing:border-box;
		padding: 0 20rpx;
	}
	.title{
		font-weight: bold;
	}
	.total_box{
		box-sizing:border-box;
		padding:20rpx;
		background: linear-gradient(to bottom,#D7EAF3,#fff 20%);
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}
	.total_info{
		width: 33%;
		margin-top:30rpx;
	}
	.total_name{
		color: #909090;
		font-size: 24rpx;
		margin-bottom: 20rpx;
	}
	
	.lists_box{
		border-top: 1rpx solid #F8F8F8;
		margin-top: 20rpx;
	}
	
	.blue{
		color:#4092F0;
	}
	.red{
		color:#F13017;
	}
	.duo{
		font-size: 26rpx;
		font-weight: 500;
		color: #999;
	}
</style>